<template>
  <div class="dashboard-container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <!-- 选择题型 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
         <div class="grid-content bg-purple choice">
           <el-form-item label="选择题型：" prop="Choose_a_question_type" style="width: 100%;">
               <el-select v-model="ruleForm.Choose_a_question_type" placeholder="请选择题型" style="width: 100%;">
                <el-option
                   v-for="item in cities"
                   :key="item.cities_value"
                   :label="item.label"
                   :value="item.cities_value">
                   <span style="float: left">{{ item.label }}</span>
                   <span style="float: right; color: #8492a6; font-size: 13px">{{ item.cities_value }}</span>
                </el-option>
               </el-select>
             </el-form-item>
         </div>
      </el-col>
    </el-row>

    <!-- 标题 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
       <div class="grid-content bg-purple-dark title">
         <el-form-item label="标题：" prop="title" style="width: 100%;">
           <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
         </el-form-item>
       </div>
      </el-col>
    </el-row>

    <!-- 选项 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple">
         <div class="grid-content bg-purple-dark option" style="margin-top: 0px;">
           <el-form-item label="选项：" prop="choice_A" class="option-div"></el-form-item>
           <div style="width: 100%;">
             <el-row class="option-A">
               <span class="option-span1">A</span>
               <el-form-item prop="choice_A" style="width: 100%;">
                 <el-input v-model="ruleForm.choice_A" placeholder="请输入标题" style="margin-left: 0px;"></el-input>
               </el-form-item>
             </el-row>
             <el-row class="option-B">
               <span class="option-span1">B</span>
               <el-form-item prop="choice_B" style="width: 100%;">
                 <el-input v-model="ruleForm.choice_B" placeholder="请输入标题"></el-input>
               </el-form-item>
             </el-row>
             <el-row class="option-C">
               <span class="option-span1">C</span>
               <el-form-item prop="choice_C" style="width: 100%;">
                 <el-input v-model="ruleForm.choice_C" placeholder="请输入标题"></el-input>
               </el-form-item>
             </el-row>
             <el-row class="option-D">
               <span class="option-span1">D</span>
               <el-form-item prop="choice_D" style="width: 100%;">
                 <el-input v-model="ruleForm.choice_D" placeholder="请输入标题"></el-input>
               </el-form-item>
             </el-row>
           </div>
         </div>
        </div>
      </el-col>
    </el-row>

    <!-- 正确答案下拉选择 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple">
         <div class="grid-content bg-purple choice">
           <el-form-item label="正确答案：" prop="Drop_down_selection" style="width: 100%;">
             <el-select v-model="ruleForm.Drop_down_selection" placeholder="请选择正确的答案" style="width: 100%;">
              <el-option
                 v-for="item in right_key"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
              </el-option>
             </el-select>
           </el-form-item>
         </div>
        </div>
      </el-col>
    </el-row>

    <!-- 正确答案点击选择 -->
   <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple choice-click">
         <el-form-item label="正确答案：" prop="Choose_an_answer">
            <el-checkbox-group v-model="ruleForm.Choose_an_answer">
              <el-checkbox label="A" name="Choose_an_answer"></el-checkbox>
              <el-checkbox label="B" name="Choose_an_answer"></el-checkbox>
              <el-checkbox label="C" name="Choose_an_answer"></el-checkbox>
              <el-checkbox label="D" name="Choose_an_answer"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <!-- 正确答案填写 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple choice">
          <el-form-item label="正确答案：" prop="Fill_in_the_answer" style="width: 100%;">
            <el-input type="textarea" v-model="ruleForm.Fill_in_the_answer" placeholder="请输入正确答案" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <!-- 正确答案判断对错 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple">
         <div class="grid-content bg-purple choice">
           <el-form-item label="正确答案：" prop="right_and_wrong" style="width: 100%;">
             <el-select v-model="ruleForm.right_and_wrong" placeholder="请选择题型" style="width: 100%;">
              <el-option
                 v-for="item in judge_topic"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
              </el-option>
             </el-select>
           </el-form-item>
         </div>
        </div>
      </el-col>
    </el-row>

    <!-- 解析 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple choice">
          <el-form-item label="解析：" prop="analysis" style="width: 100%;">
            <el-input type="textarea" v-model="ruleForm.analysis" placeholder="请输入解析" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <!-- 视频解析 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
         <div class="grid-content bg-purple choice">
          <el-form-item label="视频解析：" prop="Video_analysis" style="width: 100%;">
            <el-select v-model="ruleForm.Video_analysis" placeholder="请选择视频解析" style="width: 100%;">
             <el-option
                v-for="item in Video_analysis"
                :key="item.value"
                :label="item.label"
                :value="item.value">
             </el-option>
            </el-select>
          </el-form-item>
         </div>

         <!-- 在线视频 -->
         <el-row style="margin-left: 100px;" class="Online-video">
           <el-form-item prop="Online_video" style="width: 100%;">
             <el-input v-model="ruleForm.Online_video" placeholder="请输入视频连接"></el-input>
           </el-form-item>
         </el-row>

         <!-- 本地视频 -->
         <el-row style="margin-left: 100px;">
           <el-upload
             action="https://jsonplaceholder.typicode.com/posts/"
             list-type="picture-card"
             :on-preview="handlePictureCardPreview"
             :on-remove="handleRemove">
             <i class="el-icon-plus"></i>
           </el-upload>
           <el-dialog :visible.sync="dialogVisible">
             <img width="100%" :src="dialogImageUrl" alt="">
           </el-dialog>
         </el-row>
      </el-col>
    </el-row>

    <!-- 添加 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple" style=" margin-left: 105px;">
          <el-button type="primary" style="width: 100%;" @click="submitForm('ruleForm')">添加</el-button>
        </div>
      </el-col>
    </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        choice: [{
          value: '选项1',
          label: '请选择题型'
        }, {
          value: '选项2',
          label: '单选题'
        }, {
          value: '选项3',
          label: '多选题'
        }, {
          value: '选项4',
          label: '问答题'
        }, {
          value: '选项5',
          label: '填空题'
        }, {
          value: '选项6',
          label: '判断题'
        }, {
          value: '选项7',
          label: '不定项题'
        }],
        cities: [{
          label: '请选择题型'
        }, {
          cities_value: '剩余21题',
          label: '单选题'
        }, {
          cities_value: '剩余22题',
          label: '多选题'
        }, {
          cities_value: '剩余23题',
          label: '问答题'
        }, {
          cities_value: '剩余24题',
          label: '填空题'
        }, {
          cities_value: '剩余25题',
          label: '判断题'
        }, {
          cities_value: '剩余26题',
          label: '不定项题'
        }],
        right_key :[{
          value: '选项1',
          label: '请选择正确的答案'
        },{
          value: '选项2',
          label: 'A'
        },{
          value: '选项3',
          label: 'B'
        },{
          value: '选项4',
          label: 'C'
        },{
          value: '选项5',
          label: 'D'
        }],
        Video_analysis: [{
          value: '选项1',
          label: '请选择视频解析'
        },{
          value: '选项2',
          label: '本地视频'
        },{
          value: '选项3',
          label: '91在线视频'
        }],
        judge_topic: [{
          value: '选项1',
          label: '请选择对错'
        },{
          value: '选项2',
          label: '对'
        },{
          value: '选项3',
          label: '错'
        }],
        ruleForm: {
          Choose_a_question_type: '',
          title: '',
          choice_A: '',
          choice_B: '',
          choice_C: '',
          choice_D: '',
          analysis: '',
          Online_video: '',
          right_and_wrong: '',
          Fill_in_the_answer: '',
          Drop_down_selection: '',
          Choose_an_answer: [],
          Video_analysis: '',
        },
        rules: {
          Choose_a_question_type: [
            { required: true, message: '请选择题型', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          choice_A: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          choice_B: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          choice_C: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          choice_D: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          analysis: [
            { required: true, message: '请输入正确答案', trigger: 'blur' }
          ],
          Online_video: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          right_and_wrong: [
            { required: true, message: '请选择对错', trigger: 'change' }
          ],
          Fill_in_the_answer: [
            { required: true, message: '请输入正确答案', trigger: 'blur' }
          ],
          Drop_down_selection: [
            { required: true, message: '请选择正确的答案', trigger: 'change' }
          ],
          Choose_an_answer: [
            { type: 'array', required: true, message: '请至少选择一个答案', trigger: 'change' }
          ],
          Video_analysis: [
            { required: true, message: '请输入解析', trigger: 'blur' }
          ]
        },
        value: '',
        input: '',
        textarea2: '',
        dialogImageUrl: '',
        dialogVisible: false,
        checkList: ['选中且禁用','复选框 A']
      }
    },
    computed: {

    },
    mounted() {

    },
    filters: {

    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style scoped>
  .choice-click /deep/ .el-checkbox__inner{ width: 19px; height: 19px; }
  .choice-click /deep/ .el-checkbox__label{ font-size: 17px; }
  .choice-click /deep/ .el-checkbox__inner::after{ top: 3px; left: 6px; }
  .option /deep/ .el-form-item__content{margin-left: 0px !important;}
  .option /deep/ .option-div .el-form-item__content .el-form-item__error{display: none;}
  .Online-video /deep/ .el-form-item__content{margin-left: 0px !important;}
</style>
<style>
  .choice{width: 100%;}
  .choice .choice-span,.title .title-span,.choice-click-span{ display: flex; align-items: center; width: 15%; justify-content: flex-end; padding-right: 15px; }
  .option{margin-top: 10px; width: 100%;}
  .option-span{align-items: inherit !important; line-height: 40px;}
  .option-span,.option-span1{display: flex; align-items: center; width: 15%;padding-right: 15px; justify-content: flex-end;}
  .option-span1{justify-content: center; width: 10%;}
  .option-A .option-span1,.option-B .option-span1,.option-C .option-span1,.option-D .option-span1{align-items: inherit; line-height: 40px;}
  .option-A,.option-B,.option-C,.option-D{display: flex; width: 100%;}
  .option-B,.option-C,.option-D{margin-top: 0px !important;}
  .choice-click{padding: 20px 0;}
</style>
